<template>
  <el-card>
    <el-row>
      <el-col :span="12">
        <Echart :options="levelData" :height="280" />
      </el-col>
      <el-col :span="12">
        <Echart :options="sortData" :height="280" />
      </el-col>
    </el-row>
  </el-card>
</template>
<script lang="ts" setup>
import { set, cloneDeep } from 'lodash-es'
import { EChartsOption } from 'echarts'
import { pieOptions } from '../echarts-data'
const props = defineProps({
  data: {
    type: Object,
    default: () => {}
  }
})
const levelData = reactive<EChartsOption>(cloneDeep(pieOptions)) as EChartsOption
const sortData = reactive<EChartsOption>(cloneDeep(pieOptions)) as EChartsOption
const { t } = useI18n()
const setData = async () => {
  const data = props.data
  set(
    levelData,
    'legend.data',
    data.level.map((v) => t(v.name))
  )
  levelData!.series![0].name = '文件资产等级'
  levelData!.series![0].data = data.level.map((v) => {
    return {
      name: t(v.name),
      value: v.value
    }
  })
  levelData.title!.text = '文件资产等级'
  set(
    sortData,
    'legend.data',
    data.sort.map((v) => t(v.name))
  )
  sortData!.series![0].name = '文件资产类型'
  sortData!.series![0].data = data.sort.map((v) => {
    return {
      name: t(v.name),
      value: v.value
    }
  })
  sortData.title!.text = '文件资产类型'
}
watchEffect(() => {
  setData()
})
</script>
